<template>
	<view style="background-color: #f7f7f7;">
		<view style="padding: 30rpx; background-color: #FFFFFF;">
			<view>
				<view style="" class="u-flex">
					<image :src="$url+bookData.imageUrl" mode="aspectFill"
					style="width: 220rpx;height: 340rpx;"></image>
					<view class="u-flex-col"style="align-content: space-between; flex: 1;">
						<h2 style="margin: 30rpx;">{{bookData.name}}</h2>
						<view style="margin: 0 0 20rpx 30rpx">
							<text>{{bookData.types}}</text>
							<text style="margin: 0 5rpx;">·</text>
							<text>{{bookData.state}}</text>
							<text style="margin: 0 5rpx;">·</text>
							<text>{{bookData.heat}}万<image src="../../../static/redu.png" mode="aspectFill"
								style="width: 30rpx;height: 30rpx;"></image>
							</text>
						</view>
						<view style="margin: 30rpx">
							<text style="margin: 10rpx;padding: 10rpx 20rpx;border-radius: 0.5em; background-color: #fbecf3;">西红柿原创</text>
						</view>
						<view style="margin: 0 0 20rpx 30rpx;color: #000000;font-size: 30rpx;
						text-align: right;" @click="addShuj">{{state == false?'加入':'已加'}}书架</view>
					</view>
				</view>
			</view>
			<view style="margin: 50rpx 0;" @click="authorClick(author.id)">
				<view class="u-flex" style="justify-content: space-between;">
					<view style="margin: 20rpx 0;"class="u-flex">
						<u-avatar :src="$url+author.avatar"></u-avatar>
						<view style="margin-left: 20rpx;">
							<view class="u-flex">
								<view style="font-size: 30rpx;">{{author.authorName}}</view>
								<text style="margin-left: 20rpx; background-color: #bc9171;color: #fdfbea; border-radius: 0.3em;padding: 5rpx 15rpx;">作者</text>
							</view>
							
							<view style="color: #B2B2B4;">关注我，掌握书籍最新动态</view>
						</view>
					</view>
					<view style="font-weight: bold; background-color: #f8f6f9;color: #f66c2e;border-radius: 30%;padding: 10rpx 20rpx;"
					@click.stop="gGuanz" v-if="indexs == 0">+&nbsp;关注</view>
					<view style="background-color: #f7f7f7; padding: 15rpx 30rpx;border-radius: 2em;
					color: #808080; font-weight: bold;" @click.stop="yGuanz" v-else>
						已关注
					</view>
				</view>
			</view>
			<view class="u-flex">
				<h2 style="font-size: 56rpx;margin-right: 30rpx;">{{bookData.score}}</h2>
				<u-rate disabled  v-model="value" active-color="#000" inactive-color="#C0C0C0"
				></u-rate>
			</view>
			<u-line :hair-line="false" style="margin: 30rpx 0;"></u-line>
			<view>
				<h3 style="margin-bottom: 20rpx;">书籍简介</h3>
				<view style="margin-bottom: 30rpx;">
					<text>{{bookData.metaDescription}}</text>
				</view>
				<view style="margin-bottom: 50rpx;">
					<text style="margin-right: 15rpx;padding: 10rpx 20rpx;border-radius: 0.5em; background-color: #f0f0f0;">{{bookData.types}}</text>
					<text style="margin-right: 15rpx;padding: 10rpx 20rpx;border-radius: 0.5em; background-color: #f0f0f0;">西红柿原创</text>
				</view>
			</view>
			<u-line :hair-line="false" style="margin: 30rpx 0;"></u-line>
			<view class="u-flex"style="justify-content: space-between;margin: 10rpx 0;" @click="show = true">
				<h3>查看目录</h3>
				<view style="color: #979797;">{{bookData.updateTime | date}}更新一章></view>
			</view>
			<u-popup mode="bottom" v-model="show" border-radius="20">
				<view style="padding: 40rpx;">
					<view class="u-flex"style="justify-content: space-between;">
						<u-icon name="arrow-down" size="50" @click="show = false"></u-icon>
						<h3>目录</h3>
						<view @click="paix"> {{i == false?'倒':'正'}}序</view>
					</view>
					<u-line :hair-line="false" style="margin: 30rpx 0;"></u-line>
					<view style="color: #979797;">
						<view>{{bookData.state}}至{{chapter.length}}章&nbsp;上次更新{{bookData.updateTime |date}}</view>
						<view style="margin: 30rpx 0;">第一卷</view>
					</view>
					<view>
						<view style="margin: 50rpx 0;"
						v-for="(item,index) in chapter" :key="index" @click="chapterClick(item.chapterId)">{{item.chapterName}}</view>
					</view>
				</view>
			</u-popup>
		</view>
		<view style="margin-top: 20rpx;background-color: #FFFFFF; padding: 30rpx;">
			<view class="u-flex"style="justify-content: space-between;">
				<h3>书评&nbsp;·&nbsp;{{comments.length}}</h3>
				<view style="color: #979797;" @click="getCommentsClick(bookData.id)">全部书评></view>
			</view>
			<view v-for="(item,index) in comments":key="index" v-if="index < 5">
				<comment :item="item"></comment>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				value:5,
				bookData:{},
				chapter:[],
				i:false,
				state:false,
				author:{},
				comments:[],
				indexs:0,
				followAuthor:{},
				opstionId:0,
				chapters:[]
			}
		},
		methods: {
			authorClick(e){
				uni.navigateTo({
					url:"../authorItem/authorItem?id="+e
				})
			},
			async addShuj(){
				if(this.state){
					return uni.showToast({
						title:"书架已有此书"
					})
				}else{
					this.getAddShuj()
				}
			},
			async getAddShuj(){
				const res=await this.$myRequst({
					url:"/bookshelf/post",
					method:"POST",
					data:{
						userId:uni.getStorageSync("userId"),
						bookdataId:this.bookData.id,
						joinTime:Date.now()
					}
				})
				if(res.data.code == 200){
					uni.showToast({
						title:"添加成功",
						success: (res) => {
							this.state = true
						}
					})
				}
			},
			async getpaic(e){//排查是否有此书
				const res = await this.$myRequst({
					url:"/bookshelf/gets/"+ uni.getStorageSync("userId")
				})
				
				return res.data.data.find(item =>item.bookdataId == e)
			},
			async getBookDataId(id){
				const res=await this.$myRequst({
					url:"/bookData/get/"+id
				})
				this.bookData = res.data.data
				if(this.bookData.score >=9){
					this.value = 5
				}else if(this.bookData.score >=8){
					this.value = 4
				}else if(this.bookData.score >=7){
					this.value = 3
				}else{
					this.value = 2
				}
				return res
			},
			async getChapter(id){
				const res = await this.$myRequst({
					url:"/chapter/gets/"+id
				})
				this.chapter = res.data.data
				this.chapters = res.data.data
				console.log(this.chapters)
			},
			chapterClick(e){
				let x = 1
				for (var i = 0; i < this.chapters.length; i++) {
					if(this.chapters[i].chapterId == e){
						break
					}
					++x
				}
				console.log(x)
				uni.navigateTo({
					url:"../bookItem/bookItem?id="+this.bookData.id+"&current="+x
				})
			},
			paix(){
				//chapterId
				if(this.i){
					this.chapter = this.chapter.sort((a,b)=>a.chapterId - b.chapterId)
					this.i = false
				}else{
					this.chapter = this.chapter.sort((a,b)=>b.chapterId - a.chapterId)
					this.i = true
				}
			},
			async getAuthor(id){
				const res=await this.$myRequst({
					url:"/author/get/"+id
				})
				this.author = res.data.data
				return res
			},
			getCommentsClick(e){
				uni.navigateTo({
					url:"../comments/comments?id="+e
				})
			},
			async getComments(e){
				const res=await this.$myRequst({
					url:"/comment/gets/"+e
				})
				this.comments = res.data.data.sort((a,b)=>b.likes - a.likes)
				console.log(this.comments)
			},
			yGuanz(){
				uni.showModal({
					title:"确定不再关注此账号？",
					confirmColor:"#f06d2d",
					confirmText:"不再关注",
					success: (res) => {
						if(res.confirm){
							this.getFollowAuthor().then((res)=>{
								this.getFollowDelete().then((res)=>{
									this.getAuthorPut().then((res)=>{
										this.indexs = 0
									})
								})
							})
							
						}
						
					}
				})
			},
			async getFollowDelete(){
				const res=await this.$myRequst({
					url:"/follow/delete/"+this.followAuthor.id,
					method:"DELETE"
				})
				
			},
			async getFollowPost(){
				console.log(this.author.id,uni.getStorageSync("userId"))
				const res=await this.$myRequst({
					url:"/follow/post",
					method:"POST",
					data:{
						authorIds:this.author.id,
						userId:uni.getStorageSync("userId")
					}
				})
			},
			async getAuthorPut(){
				let i = 0
				if(this.indexs == 0){
					i = ++this.author.pour
				}else{
					i = --this.author.pour
				}
				const res=await this.$myRequst({
					url:"/author/put",
					method:"PUT",
					data:{
						id:this.author.id,
						pour:i
					}
				})
			},
			gGuanz(){
				this.getFollowPost().then((res)=>{
					this.getAuthorPut().then((res)=>{
						this.indexs = 1
					})
				})
			},
			async getFollowAuthor(){
				const res=await this.$myRequst({
					url:"/follow/gets/author/"+uni.getStorageSync("userId")
				})
				
				this.followAuthor = res.data.data.find(item => this.author.id == item.authorIds)
				if(this.followAuthor != undefined){
					this.indexs = 1
				}else{
					this.indexs = 0
				}
			}
		},
		onLoad(opstion) {
			this.opstionId = opstion.id
			this.getBookDataId(opstion.id).then((res)=>{
				this.getChapter(res.data.data.id)
			}).then((res) =>{
				this.getpaic(this.bookData.id).then((res)=>{
					if(res == undefined){
						this.state = false
					}else{
						this.state = true
					}
				})
			}).then((res)=>{
				this.getAuthor(this.bookData.authorId).then((res)=>{
					this.getFollowAuthor()
				})
			})
			
		},
		onShow() {
			this.getFollowAuthor()
			this.getComments(this.opstionId)
			
		}
	}
</script>

<style>

</style>
